<style scoped>
    .main {
        margin: 10px 100px;
    }

    .center-row {
        text-align: center;
        margin-left: -120px;
        margin-right: -120px;
    }

    .date-cell-title {
        border: 1px solid #ffffff;
    }

    .date-cell {
        border: 1px solid #ffffff;
        border-top-width: 0;
    }
</style>

<template>
    <div id="course" class="main">
        <HeadTitle></HeadTitle>
        <Row :gutter="32" className="center-row">
            <i-col span="2">
                <Button size="large" type="primary" icon="chevron-left" long @click="toHome"></Button>
            </i-col>
            <i-col span="2">
                <Button size="large" type="primary" long @click="toCurrentMonth">本月</Button>
            </i-col>
            <i-col span="11">
                <Button size="large" type="primary" icon="android-arrow-back" @click="toBackMonth"></Button>
                <span>{{calendarTitle}}</span>
                <Button size="large" type="primary" icon="android-arrow-forward" @click="toForwardMonth"></Button>
            </i-col>
            <i-col span="3">
                <Icon type="ios-book" color="#ff7f00"></Icon>
                ：第一课堂
            </i-col>
            <i-col span="3">
                <Icon type="ios-book" color="#ffbbff"></Icon>
                ：第二课堂
            </i-col>
            <i-col span="3">
                <Icon type="ios-book" color="#eee685"></Icon>
                ：第三课堂
            </i-col>
        </Row>
        <Row type="flex" justify="center" className="center-row">
            <i-col span="3" v-for="w in 7" :key="w" className="date-cell-title">
                星期{{formatWeek(w - 1)}}
            </i-col>
        </Row>
        <Row v-for="i in 6" :key="i" type="flex" justify="center" className="center-row">
            <i-col span="3" v-for="j in 7" :key="j" className="date-cell">
                <CourseCell :calendar="getCurrentCalendar(i, j)" :current-month="currentMonth"></CourseCell>
            </i-col>
        </Row>
    </div>
</template>

<script>
    import Axios from "../axios";
    import Common from "../common";
    import HeadTitle from "./component/HeadTitle.vue";
    import CourseCell from "./component/CourseCell.vue";
    import ICol from "../../node_modules/iview/src/components/grid/col.vue";

    export default {
        components: {
            ICol,
            HeadTitle,
            CourseCell
        },
        name: "course",
        data() {
            return {
                current: new Date(),
                shift: 0,
                courses: []
            }
        },
        mounted() {
            Axios.get("/courses/year").then((response) => {
                if (response.status === 200) {
                    this.courses = response.data.map((item) => {
                        return {
                            id: item.id,
                            date: (item.startDate + " " + item.startTime).date(),
                            name: item.name,
                            schoolId: item.schoolId,
                            shareUrl: item.shareUrl,
                            introduce: item.introduce
                        }
                    });
                } else {
                    this.$Message.error("获取课程信息失败。");
                }
            });
        },
        computed: {
            currentCalendar() {
                const s = this.shiftDate;
                const week = s.getDay();
                const year = s.getFullYear();
                const month = s.getMonth();

                const calendar = [];
                for (let i = -week + 1; i < 42 - week + 1; i++) {
                    const newDate = new Date(year, month, i);
                    const courses = [];
                    for (let j = 0; j < this.courses.length; j++) {
                        if (Common.isSameDay(this.courses[j].date, newDate)) {
                            courses.push(this.courses[j]);
                        }
                    }
                    calendar.push({
                        date: newDate,
                        courses: courses
                    });
                }
                return calendar;
            },
            calendarTitle() {
                return this.shiftDate.format("YYYY年M月");
            },
            shiftDate() {
                const year = this.current.getFullYear();
                const month = this.current.getMonth();
                return new Date(year, month + this.shift, 1);
            },
            currentMonth() {
                return this.shiftDate.getMonth();
            },
        },
        methods: {
            toHome() {
                this.$router.push("/");
            },
            toCurrentMonth() {
                this.shift = 0;
            },
            toBackMonth() {
                this.shift--;
            },
            toForwardMonth() {
                this.shift++;
            },
            getCurrentCalendar(row, col) {
                return this.currentCalendar[(row - 1) * 7 + col - 1];
            },
            getCurrentCourses(row, col) {
                const courses = [];
                for (let i = 0; i < this.courses.length; i++) {
                    const course = this.courses[i];
                    if (Common.isSameDay(course.date, this.getCurrentCalendar(row, col))) {
                        courses.push(course);
                    }
                }
                return courses;
            },
            formatWeek(week) {
                return Common.formatWeek(week);
            }
        }
    }
</script>
